<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 头部刷新 -->
    <!-- 头部刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 粘性布局 -->
      <van-sticky>
        <!-- 标题 -->
        <van-row
          style="
            height: 40px;
            padding-top: 20px;
            line-height: 40px;
            background-color: #57c4f6;
          ">
          <van-col
            span="4"
            @click="returnTo"
            style="color: #f8f8f8; font-size: 21px">
            <van-icon name="arrow-left" />
          </van-col>
          <van-col span="15" style="color: #f8f8f8; font-size: 21px"
            >我的积分</van-col
          >
          <van-col span="5"></van-col>
        </van-row>
      </van-sticky>
      <!-- 空白 -->
      <van-row
        style="
          height: 75px;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
          background-color: #57c4f6;
        ">
        <van-col span="24"> </van-col>
      </van-row>
      <!-- 头像 -->

      <!-- 洗车卡 -->
      <van-row
        style="
          height: 80px;
          margin-top: -40px;
          margin-left: 10px;
          background-color: #f8f8f8;
          width: 370px;
          border-radius: 12px;
        ">
        <van-col span="2"></van-col>
        <van-col span="20">
          <div style="font-size: 30px; font-weight: 600; margin-top: 18px">
            {{ useramount.credits }}
          </div>
          <div style="color: #99b5d7; font-size: 15px; margin-left: 12px">
            当前积分
          </div>
        </van-col>
        <van-col span="2"></van-col>
      </van-row>
      <van-row style="margin-top: 69px">
        <van-col span="5" style="font-size: 16px; font-weight: bold"
          >门店名称</van-col
        >
        <van-col span="10"></van-col>
        <van-col span="9" @click="jump('IntegralStroe')"
          >{{ storeName }}
          <van-icon name="arrow" />
        </van-col>
      </van-row>

      <van-row style="margin-top: 15px" @click="jumpAll()">
        <van-col span="5" style="font-size: 16px; font-weight: bold"
          >余额明细</van-col
        >
        <van-col span="13"></van-col>
        <van-col span="6">查看全部<van-icon name="arrow" /></van-col>
      </van-row>
      <van-empty description="暂无数据" v-if="userDetail == null" />
      <!-- 余额详情 -->
      <div v-if="index < 2" v-for="(item, index) in userDetail">
        <van-row
          style="margin-top: 30px"
          v-if="(item.accountMoney != null) & (item.accountMoney != null)">
          <van-col span="7" style="font-size: 16px; font-weight: bold"
            >充值: +{{ item.accountMoney }}</van-col
          >
          <van-col span="6"></van-col>
          <van-col span="11" style="color: #b1b1b1"
            >{{ item.rechargeTime }}
          </van-col>
        </van-row>
        <div
          v-if="(item.accountMoney != null) & (item.accountMoney != null)"
          style="
            text-align: left;
            margin-left: 24px;
            margin-top: 9px;
            color: #b1b1b1;
          ">
          线下洗车兑换({{ item.storeName }})
        </div>

          <van-row
          style="margin-top: 30px"
          v-if="(item.expenditure != null) & (item.expenditure != null)">
          <van-col span="7" style="font-size: 16px; font-weight: bold"
            >消费: -{{ item.expenditure }}</van-col
          >
          <van-col span="6"></van-col>
          <van-col span="11" style="color: #b1b1b1"
            >{{ item.expenditureTime }}
          </van-col>
        </van-row>
        <div
          v-if="(item.expenditure != null) & (item.expenditure != null)"
          style="
            text-align: left;
            margin-left: 24px;
            margin-top: 9px;
            color: #b1b1b1;
          ">
          购买商品支出({{ item.storeName }})
        </div>

      </div>
      <!-- 常用功能 -->
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast } from "vant";
// import "@/assets/font_x2q6up6l3e/iconfont.css"
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      databaseName: {},
      isLoading: false, //刷新参数
      storeName: "请选择门店", //门店名称
      storeId: "", //门店id
      useramount: { credits: "0" }, //存放余额
      userId: "", //获取用户id
      userDetail: [], //余额详情
    };
  },
  created() {
    // this.loadStar();
    this.storeId = this.$route.query.storeId;
    console.log("获取的门店id:" + this.storeId);
    this.selectByToken();
    //判断门店id是否为null
    if (this.storeId != null) {
      //执行查询门店名称的方法
      this.selectStoreName();
    }
    //生命周期  创建后要做的事情  vue被创建时候执行的
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    //根据token查询当前登录用户信息
    selectByToken() {
      var _this = this;
      console.log("根据token查询当前登录用户信息。。。。。");
      this.$http
        .get("/tuser/queryBy")
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.userId = response.data.data.id; //获取用户id
          }
        })
        .catch(function (error) {
          _this.$toast("获取用户id出错。。。");
        });
    },
    //根据门店id查询门店名称
    selectStoreName() {
      var _this = this;
      this.$http
        .get("/tbStore/queryById?id=" + this.storeId)
        .then(function (response) {
          console.log("根据门店id查询门店名称。。。。");
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.storeName = response.data.data[0].storeName; //获取用户名
            _this.queryUserAndStore();
            _this.queryUserStore();
          }
        })
        .catch(function (error) {
          //alert(JSON.stringify(error));
          _this.$toast("出错了。。");
        });
    },
    //获取用户余额
    queryUserAndStore() {
      var _this = this;
      this.$http
        .get(
          "/integral/queryInteg?userId=" +
            this.userId +
            "&storeId=" +
            this.storeId
        )
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.useramount = response.data.data;
          }
        })
        .catch(function (error) {
          _this.$toast("获取用户余额错了。。。");
        });
    },
    //获取用户余额详情
    queryUserStore() {
      var _this = this;
      console.log("根据token查询当前登录用户信息。。。。。");
      this.$http
        .get(
          "/integralDetail/queryUserStore?userId=" +
            this.userId +
            "&storeId=" +
            this.storeId
        )
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            // _this.userDetail = response.data.data;
            _this.userDetail = response.data.data;
          }
        })
        .catch(function (error) {
          _this.$toast("获取用户余额错了。。。");
        });
    },
    //确定选择的门店
    chooseStore() {
      //跳转页面时传参
      this.$router.push({
        path: "/Payment",
        query: { storeId: this.storeId },
      });
    },
    returnTo() {
      this.$router.push("myView");
    },
    //  方法事件处理
    //刷新方法
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        //调用请求
      }, 1000);
    },
    jumpAll() {
      if ((this.storeId != null) & (this.storeId != "")) {
        this.$router.push({
          name: "detailIntegral",
          query: {
            userId: this.userId,
            storeId: this.storeId,
          },
        });
      } else {
        Toast("请先选择门店");
      }
    },
    jump(uri) {
      this.$router.push(
        uri,
        () => {},
        () => {}
      );
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>
